<template>
    <div class="all">
        <div class="search">
            <Search />
        </div>
        <van-tree-select v-model:main-active-index="activeIndex" :items="newTree" @click-nav="onClickNav">
            <template #content>

                <div class="container">
                    <van-tabs>
                        <van-tab title="综合" name="sell">
                            <TabList ref="tab1Ref" :request="onRequest" />
                        </van-tab>

                        <van-tab title="销量" name="syn">
                            <TabList ref="tab2Ref" :request="onRequest1" />
                        </van-tab>

                        <van-tab title="新品" name="new">
                            <TabList ref="tab3Ref" :request="onRequest2" />
                        </van-tab>
                    </van-tabs>
                </div>
            </template>
        </van-tree-select>
    </div>
</template>

<script lang="ts" setup>
import Search from '@/components/search.vue'
import TabList from '@/components/tab.vue'
import { getSearchNewGoodsList, getSearchSellGoodsList, getSearchSynGoodsList, getTreeSelect, type CatsTree } from '@/api'
import { ref, watchEffect, computed, watch } from 'vue'
import { type IParams } from '@/components/tab.vue'

// 左侧栏 默认不显示
const activeIndex = ref(9999);
const treeList = ref([]) // 左侧栏数据
const page = ref<number>()
const limit = ref<number>()
const keyWord = ref('')

const treeGoods = ref<CatsTree.goodsTree[]>([]);
// 获取catstree接口数据
watchEffect(async () => {
    const { data }: any = await getTreeSelect()
    treeGoods.value = data
})
// 商城页 侧边栏数据
const newTree = computed(() => {
    return treeGoods.value.map((item: CatsTree.goodsTree) => {
        // 拿出一份，进行遍历切换用
        // @ts-ignore
        treeList.value.push(item.cat_name)
        return {
            text: item.cat_name,
            id: item.cat_id
        }
    })
})

// 商城页 侧边栏切换
function onClickNav(name: number) {
    const list = treeList.value
    console.log(list[name]);
    keyWord.value = list[name]
}

const tab1Ref = ref<InstanceType<typeof TabList> | null>(null)
const tab2Ref = ref<InstanceType<typeof TabList> | null>(null)
const tab3Ref = ref<InstanceType<typeof TabList> | null>(null)

watch(
    () => keyWord.value,
    () => {
        // 获取到页数 就是已经渲染了。重置下渲染页面
        // onRequest({_page:page.value,_limit:limit.value,q: newValue} as IParams)
        // onRequest1({_page:page.value,_limit:limit.value,q: newValue} as IParams)
        // onRequest2({_page:page.value,_limit:limit.value,q: newValue} as IParams)

        // 让右侧组件，触发接口调用
        tab1Ref.value?.onRefresh()
        tab2Ref.value?.onRefresh()
        tab3Ref.value?.onRefresh()
    }
)

const onRequest = async (params: IParams) => {
    // console.log(params);
    const sellGoods = await getSearchSellGoodsList({
        _page: params._page,
        _limit: params._limit,
        // @ts-ignore
        q: keyWord.value
    });
    page.value = params._page
    limit.value = params._limit
    const { data, totalCount }: any = sellGoods
    return {
        list: data,
        total: totalCount
    }
}

const onRequest1 = async (params: IParams) => {
    const synGoods = await getSearchSynGoodsList({
        _page: params._page,
        _limit: params._limit,
        // @ts-ignore
        q: keyWord.value
    });

    const { data, totalCount }: any = synGoods

    return {
        list: data,
        total: totalCount
    }
}

const onRequest2 = async (params: IParams) => {
    const newGoods = await getSearchNewGoodsList({
        _page: params._page,
        _limit: params._limit,
        // @ts-ignore
        q: keyWord.value
    });
    const { data, totalCount }: any = newGoods
    return {
        list: data,
        total: totalCount
    }
}
</script>

<style lang="scss" scoped>
.all {
    height: 100%;
    overflow: hidden;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.search {
    display: flex;
    // height: 100%;
    height: 54px;
    padding-top: -54px;
    box-sizing: border-box;
}

.van-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

:deep(.van-tabs__nav) {
    height: 100%;
}

:deep(.van-tabs__content) {
    flex: 1;
    overflow-y: auto;
}

:deep(.van-tree-select) {
    height: 100% !important;
}
</style>